<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:styling-css-03-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-styling-css-03-b.html">Full version</a>, <a href="basic-styling-css-03-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/styling.html#StylingWithCSS">6.7 Styling with CSS</a></p>
 <p>
				<a href="basic-styling-css-02-b.html">styling-css-02-b ←</a> 
				<a href="basic-index.html">index</a>
				<a href="basic-styling-css-05-b.html">→ styling-css-05-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>styling-css-03-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=160 height=120>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/styling-css-03-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=160 height=120 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/styling-css-03-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of styling-css-03-b" src="../png/basic-styling-css-03-b.png" width="160" height="120"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
         <p>
            Verify the capability to handle combinations of simple CSS2 selectors. The style
            sheet is contained in a style element in the SVG file. The picture is in two halves.
            In each half there is a group (of class 'mummy') of circle, a rectangle and an
            irregular polygon. A style on the group makes all the children have blue fill by
            inheritance, which is overridden by a more specific selector that makes all circle,
            rect, and polygon descendents have green fill. Thus, any blue fill displayed is incorrect.
         </p>
         <p>
            In the upper test, the selector 'immediate child' selects all elements of class
            'thischild' which are immediate children of the elements of class 'mummy'. The
            rectangle and the polygon are of class'thischild' but the polygon is not an immediate
            child so must not be selected. The rectangle must be red, the circle and polygon
            must be green.</p>
         <p>
            In the lower test, the 'adjacent sibling' selector matches elements of
            class 'secundus' which are adjacent to a previous sibling of class 'primus';
            this makes the rectangle in the second test red. The first-child pseudoclass matches
            circles which are the first child of elements of class 'mummy' and if correctly
            selected this circle will be filled red. (The circle in the upper test is not
            the first child). The rectangle should also be red, with the polygon green.
         </p>
         <p>
            The rendered picture should match the reference image exactly, except for possible
            variations in the labelling text (per CSS2 rules).
         </p>
         <p>
            This tests uses 'g', 'circle', 'rect' and 'polygon' elements, as well as
            fill (solid CSS1 named colors), font-family ("Arial"), and
            font-size properties within the 'style' attribute and style element.
         </p>

		</div>
<div class="linkbar"> <p>
				<a href="basic-styling-css-02-b.html">styling-css-02-b ←</a>
				<a href="basic-index.html">index</a>
				<a href="basic-styling-css-05-b.html">→ styling-css-05-b</a>
						</p></div>
</body>
</html>
